<template>
    <div class="out_box">
        <headers @toggleLoginRegister="toggleLoginRegister" :loginRegister="formType" />

        <div class="login_bg">
            <img class="img" src="~@assets/imgs/login/main.jpg" />
            <div class="text_box">
                <h4 class="title">{{ $t('common.company') }}</h4>
                <p class="desc">{{ $t('login_register.download_text') }}</p>
                <div class="download_box">
                    <!-- <div class="download_ios pointer">
                        <i class="iconfont">&#xe655;</i>
                        iOS&nbsp;&nbsp;&nbsp;;{{ $t('common.download') }}
                    </div> -->
                    <div class="download_android pointer" @click="downloadAPP(2)">
                        <i class="iconfont">&#xe60e;</i>
                        Android&nbsp;&nbsp;&nbsp;{{ $t('common.download') }}
                    </div>
                </div>
            </div>
            <div class="login_box">
                <div :class="['content', 'relative', 'login', isRegister ? 'none' : '']">
                    <i class="iconfont qrcode">&#xe609;</i>
                    <div class="type_box mb_20">
                        <span :class="{'select': selectType === 1}" @click="selectType = 1">{{ $t('login_register.login_from_pwd') }}</span>
                        <span :class="{'select': selectType === 2}" @click="selectType = 2">{{ $t('login_register.login_from_mail') }}</span>
                    </div>
                    <div class="form_box mb_10">
                        <div class="relative mb_20">
                            <i class="iconfont">&#xe601;</i>
                            <v-input class="no_border no_radius" :placeHolder="$t('login_register.form.mobile_email')" v-model="loginForm.mobileEmail"></v-input>
                        </div>
                        <div class="relative mb_10" v-show="selectType === 1">
                            <i class="iconfont">&#xe602;</i>
                            <v-input class="no_border no_radius" :placeHolder="$t('login_register.form.login_pwd')" type="password" v-model="loginForm.password"></v-input>
                        </div>
                        <div class="relative mb_10" v-show="selectType === 2">
                            <i class="iconfont">&#xe602;</i>
                            <v-input class="no_border no_radius" :placeHolder="$t('login_register.form.valid_code')" v-model="loginForm.mobileCode"></v-input>
                            <span :class="{'send_code': true, 'sent': sendCodeText}" @click="getMessageCode">{{ sendCodeText || $t('login_register.form.send_code')}}</span>
                        </div>
                        <v-checkbox v-model="isRemember">{{ $t('login_register.form.remember') }}</v-checkbox>
                    </div>
                    <div class="tips_box mb_10" v-show="tipsText1">
                        <i class="iconfont">&#xe7ac;</i> {{ tipsText1 }}
                    </div>
                    <div class="mb_10">
                        <v-button class="block" size="large" type="primary" @click="doLoginRegister(1)">{{ $t('login_register.login') }}</v-button>
                    </div>
                    <div class="tips_box mb_10">
                        <i class="iconfont">&#xe7ac;</i>
                        {{ $t('login_register.form.tips') }}
                    </div>
                    <div class="mb_10">
                        <v-button class="block btn_register" size="large" type="primary" @click="formType = 2">{{ $t('login_register.register') }}</v-button>
                    </div>
                    <span class="forgot" @click="jumpForgot()">&nbsp;{{ $t('login_register.form.forgot') }}</span>
                </div>
                <div :class="['content', 'register', !isRegister ? 'none' : '']">
                    <div class="type_box mb_20">
                        <span :class="{'select': selectType === 1}" @click="selectType = 1">{{ $t('login_register.register_from_mobile') }}</span>
                        <span :class="{'select': selectType === 2}" @click="selectType = 2">{{ $t('login_register.register_from_mail') }}</span>
                    </div>
                    <div class="form_box mb_20">
                        <div class="relative mb_10 mobile">
                            <v-select class="mobile_area" :data="mobileArea.options" v-model="mobileArea.value" :allowClear="false"  v-show="!isMail"></v-select>
                            <v-input class="no_border no_radius"  :placeHolder="$t('login_register.form.mail')" v-model="registerForm.mail" v-show="isMail"></v-input>
                            <v-input class="no_border no_radius area"  :placeHolder="$t('login_register.form.mobile')" v-model="registerForm.mobile" v-show="!isMail"></v-input>
                        </div>
                        <div class="relative mb_10">
                            <v-input class="no_border no_radius" :placeHolder="$t('login_register.form.login_pwd')" type="password" v-model="registerForm.password"></v-input>
                        </div>
                        <div class="relative mb_10">
                            <v-input class="no_border no_radius" :placeHolder="!isMail ? $t('login_register.form.sms_valid_code') : $t('login_register.form.mail_valid_code')" v-model="registerForm.mobileCode"></v-input>
                            <span :class="{'send_code': true, 'sent': sendCodeText}" @click="getMessageCode">{{ sendCodeText || $t('login_register.form.send_code')}}</span>
                        </div>
                        <div class="relative mb_10">
                            <v-input class="no_border no_radius" :placeHolder="$t('login_register.form.share_code')" v-model="registerForm.invitationCode" :disabled="registerForm.hasInvitation"></v-input>
                        </div>
                        <div class="verify-wrap mb_10" id="verify-wrap"></div>
                    </div>
                    <div class="tips_box mb_20" v-show="tipsText2">
                        <i class="iconfont">&#xe7ac;</i> {{ tipsText2 }}
                    </div>
                    <div class="mb_10">
                        <v-button class="block" size="large" type="primary" @click="doLoginRegister(2)">{{ $t('login_register.register') }}</v-button>
                    </div>
                    <div class="agreement_box text_c">
                        <v-checkbox v-model="registerForm.agreement">{{ $t('login_register.form.click_agreement') }}</v-checkbox>
                        <span class="link">{{ $t('login_register.form.agreement') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <footers />
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';
    import '@common/slideVerify/main.js';
    import { Base64 } from '@common/base64.min.js';
    import { getToken } from '@doapis/auth/auth.js';
    import { getMessageCode } from '@doapis/user/user.js';

    let setCount;
    let slideVerify;

    export default {
        name: "LoginRegister",
        components: {
            Headers,
            Footers
        },
        data: function() {
            return {
                tipsText1: '',          // 登录错误提示
                tipsText2: '',          // 注册错误提示
                sendCodeText: '',       // 验证码倒计时文字
                slideResult: false,     // 滑动验证结果
                codeText: '',           // 验证码
                formType: 2,            // 1、登录，2、注册
                selectType: 1,          // 根据formType，登录：1、密码，2、验证码，注册：1、手机，2、邮箱
                mobileArea: {
                    value: 1,
                    options: [{
                        selected: true,
                        label: '+86',
                        value: 1
                    }, {
                        selected: false,
                        label: '+68',
                        value: 2
                    }]
                },
                loginForm: {
                    mobileEmail: '',
                    password: '',
                    mobileCode: ''
                },
                registerForm: {
                    agreement: true,
                    mobile: '',
                    mail: '',
                    password: '',
                    hasInvitation: false,
                    invitationCode: ''
                },
                isRemember: true       // 是否记住密码
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            },
            isMail: function() {
                return this.selectType === 2;
            },
            isRegister: function() {
                return this.formType === 2;
            }
        },
        methods: {
            // 切换登录注册
            toggleLoginRegister: function(params) {
                this.formType = params.type;
            },
            getToken: function() {
                getToken({
                    'grant_type': 'password',
                    'username': 'admin',
                    'password': '21232f297a57a5a743894a0e4a801fc3',
                    'tenantId': 'GRINOK',
                    'scope': 'all',
                    'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
                    'Content-Type': 'application/x-www-form-urlencoded'
                }).then(function(res) {
                    console.log(res);
                });
            },
            // 获取手机验证码
            getMessageCode: function() {
                const that = this;
                const dataForm = this.registerForm;
                const loginForm = this.loginForm;
                if (!$.testMobile(loginForm.mobileEmail) && !that.isRegister) {
                    that.tipsText1 = that.$t('login_register.valid.mobile');
                } else if(!$.testMobile(dataForm.mobile) && !that.isMail && that.isRegister) {
                    that.tipsText2 = that.$t('login_register.valid.mobile');
                } else if (!$.testMail(dataForm.mail) && that.isMail && that.isRegister) {
                    that.tipsText2 = that.$t('login_register.valid.mail');
                } else if (!this.sendCodeText) {
                    let countNum = 60;
                    that.tipsText1 = '';

                    clearInterval(setCount);
                    setCount = setInterval(function() {
                        if (countNum > 0) {
                            that.sendCodeText =  that.$t('login_register.valid.send_again') + countNum + that.$t('login_register.valid.second');
                            countNum--;
                            console.log(countNum);
                        } else {
                            clearInterval(setCount);
                            that.sendCodeText = '';
                        }
                    }, 1000);

                    getMessageCode({
                        mobileEmail: that.isRegister ? this.isMail ? dataForm.mail : dataForm.mobile : loginForm.mobileEmail
                    }).then(function(res) {
                        that.codeText = res.data.toString();
                    });
                }
            },
            // 执行登录注册
            doLoginRegister: function(type) {
                const that = this;
                if(type === 1){             // 登录
                    const dataForm = that.loginForm;
                    const selectType = that.selectType;
                    if(!$.testMobile(dataForm.mobileEmail) && !$.testMail(dataForm.mobileEmail)) {
                        that.tipsText1 = that.$t('login_register.valid.mobile_email');
                    } else {
                        let hasCode;
                        let tipsText1;
                        let loginMethod;
                        let jsonData;
                        // 判断登录类型
                        if (selectType === 1) {
                            hasCode = $.testPassword(dataForm.password);
                            tipsText1 = that.$t('login_register.valid.password');
                            jsonData = { mobileEmail: dataForm.mobileEmail, password: dataForm.password };
                        } else {
                            hasCode = dataForm.mobileCode === that.codeText;
                            tipsText1 = that.$t('login_register.valid.valid_code');
                            jsonData = { mobileEmail: dataForm.mobileEmail, mobileCode: dataForm.mobileCode };
                        }

                        if (!hasCode) {
                            that.tipsText1 = tipsText1;
                        } else {
                            that.tipsText1 = '';
                            jsonData.isRemember = that.isRemember;
                            jsonData.selectType = that.selectType;
                            that.$store.dispatch({
                                type: 'doLogin',
                                userDATA: jsonData
                            }).then(function(res) {
                                that.jumpMain();
                            });
                        }
                    }
                } else {                    // 注册
                    const dataForm = that.registerForm;
                    if(!$.testMobile(dataForm.mobile) && !that.isMail) {
                        that.tipsText2 = that.$t('login_register.valid.mobile');
                    } else if (!$.testMail(dataForm.mail) && that.isMail) {
                        that.tipsText2 = that.$t('login_register.valid.mail');
                    } else if (!$.testPassword(dataForm.password)) {
                        that.tipsText2 = that.$t('login_register.valid.password');
                    } else if (!Number(dataForm.mobileCode)) {
                        that.tipsText2 = that.$t('login_register.valid.valid_code');
                    } else if (!that.slideResult) {
                        that.tipsText2 = that.$t('login_register.valid.slide_verify') + '！！';
                    } else if (dataForm.mobileCode !== that.codeText) {
                        that.tipsText2 = that.$t('login_register.valid.valid_code');
                    } else if (!dataForm.agreement) {
                        that.tipsText2 = that.$t('login_register.valid.agreement');
                    } else {
                        let jsonData = {
                            mobileEmail: that.isMail ? dataForm.mail : dataForm.mobile,
                            password: dataForm.password,
                            invitationCode: dataForm.invitationCode
                        };
                        that.tipsText2 = '';

                        that.$store.dispatch({
                            type: 'doRegister',
                            userDATA: jsonData
                        }).then(function(res) {
                            that.$modal.success({
                                title: that.$t('common.alert.success.title'),
                                content: that.$t('common.alert.success.register'),
                                onOk: function() {
                                    that.jumpMain();
                                }
                            });
                        });
                    }
                }
            },
            downloadAPP: function(type) {
                $.showLoad('body');
                setTimeout(function() {
                    if (type === 1) {} else {
                        window.location.href = 'http://120.79.186.151:8080/mobile/grinok.apk';
                    }
                    $.hideLoad();
                }, 1300);
            },
            // 跳转首页
            jumpMain: function() {
                this.$router.replace({ path: '/main'});
            },
            // 忘记密码
            jumpForgot: function() {
                this.$router.push({ path: '/login_register/forgot', query: { type: 1 }});
            }
        },
        mounted: function() {
            const that = this;
            let params = this.$route.query;
            this.formType = Number(params.type) || 1;
            slideVerify = new $.slideVerifyPlug('#verify-wrap',{
                initText: that.$t('login_register.valid.slide_verify'),
                getSuccessState:function(res){
                    that.slideResult = res;
                }
            });
            // 判断cookies有没有账号信息，如果有，直接填好账号密码
            const userDATA = this.userDATA;
            if(userDATA && userDATA.isRemember) {
                userDATA.password = Base64.decode(userDATA.password);
                that.loginForm = userDATA;
                that.isRemember = true;
            }
            if (Number(params.type) === 2 && params.memberid) {
                that.registerForm.hasInvitation = true;
                that.registerForm.invitationCode = params.memberid;
            }
            // this.getToken();
        },
        destroyed: function () {
            clearInterval(setCount);
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .login_bg{
        width: 100%;
        position: relative;
        overflow: hidden;
        .img{
            width: 110%;
            @media screen and (max-width: @small_view) {
                width: 144%;
            }
        }
        .text_box{
            position: absolute;
            top: 22%;
            left: 11%;
            @media screen and (max-width: @small_view) {
                top: 16%;
                left: 5%;
            }
            .title{
                font-size: 88px;
                color: white;
                @media screen and (max-width: @small_view) {
                    font-size: 68px;
                }
            }
            .desc{
                margin-bottom: 40px;
                font-size: 23px;
                color: white;
                @media screen and (max-width: @small_view) {
                    font-size: 17px;
                    margin-bottom: 30px;
                }
            }
            .download_box{
                font-size: 14px;
               .download_ios, .download_android{
                   width: 180px;
                   display: inline-block;
                   line-height: 34px;
                   text-align: center;
                   border-radius: 34px;
                   border: 1px solid white;
               }
               .download_android{
                   margin-left: 14px;
                   color: white;
                   background-color: #548df8;
               }
               .download_ios{
                   color: #2474f3;
                   background-color: white;
               }
               .iconfont{
                   font-size: 14px;
                   margin-right: 8px;
               }
            }
        }
    }
    .login_box{
        position: absolute;
        right: 10%;
        top: 0;
        bottom: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        width: 340px;
        white-space: nowrap;
        overflow: hidden;
        .content{
            padding: 30px 30px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            background-color: #e9e9f2;
            transition: 0.4s all;
            left: 0;
            .qrcode{
                position: absolute;
                right: 2px;
                top: 2px;
                z-index: 7;
                font-size: 44px;
                line-height: 44px;
                cursor: pointer;
            }
            &.none{
                margin-left: -100%;
            }
            &.register{
                .ant-input{
                    padding: 4px 10px;
                    &.area{
                        padding-left: 54px;
                    }
                }
                &.none{
                    left: 100%;
                }
                .mobile{
                    .mobile_area{
                        position: absolute;
                        top: 7px;
                        left: 0;
                        z-index: 4;
                        width: 50px;
                        min-width: 0;
                        box-sizing: border-box;
                        border: none;
                        line-height: 40px;
                        /deep/ .ant-select-selection{
                            border: none;
                            background: none;
                        }
                    }
                }
            }
        }
        .type_box{
            font-size: 16px;
            font-weight: 700;
            > span{
                padding: 2px 0;
                margin-right: 8px;
                cursor: pointer;
                border-bottom: 3px solid #AAA;
            }
            .select{
                border-color: @theme_color;
            }
        }
        .form_box{
            .iconfont{
                position: absolute;
                top: 6px;
                left: 14px;
                z-index: 4;
                font-size: 17px;
                color: #ccc;
            }
            .ant-input{
                height: 40px;
                padding-left: 44px;
                box-sizing: border-box;
                background-color: #f2f2f2;
            }
            .send_code{
                position: absolute;
                bottom: 10px;
                right: 10px;
                color: @theme_color;
                font-size: 10px;
                cursor: pointer;
                &.sent{
                    color: #777;
                }
            }
        }
        .forgot{
            cursor: pointer;
        }
        /deep/ .ant-btn-primary{
            width: 100%;
            height: 40px;
            box-sizing: border-box;
        }
        .tips_box{
            font-size: 12px;
            color: #F54F23;
            white-space: initial;
            .iconfont{
                display: inline-block;
                margin-top: -1px;
                vertical-align: middle;
            }
        }
        .btn_register{
            color: black;
            background-color: white;
        }
        .agreement_box{
            text-align: center;
            .link{
                cursor: pointer;
                text-decoration: underline;
            }
        }
    }
</style>
